<template>
  <view class="car">
    <!-- 汽车图片 -->
    <view class="carphoto">
      <image :src="img" class="img" bindtap="preview"></image>
    </view>
    <!-- 汽车的结构组成 -->
    <view class="carinfo" v-for="item in carinfo" :key="item.pinpai">
      <!-- 从后端调取汽车的品牌名 -->
      <h1 class="uni-h1">{{item.pinpai}}</h1>
      <view class="one" v-for="item in qiche" :key="item.nengyuan">
        <div class="uni-div">
          <h3 class="uni-h3">能源类型</h3>
          <!-- 从后端调取汽车的能源类型 -->
          <span class="span">{{item.nengyuan}}</span>
        </div>
        <div class="uni-div">
          <h3 class="uni-h3">排放量</h3>
          <!-- 从后端调取汽车的排放量 -->
          <span class="span">{{item.pailiang}}</span>
        </div>
        <div class="uni-div">
          <h3 class="uni-h3">结构/座位</h3>
          <!-- 从后端调取汽车的结构/座位 -->
          <span class="span">{{item.jiegou}}</span>
        </div>
        <div class="uni-div">
          <h3 class="uni-h3">燃油标号</h3>
          <!-- 从后端调取汽车燃油标号 -->
          <span class="span">{{item.ranyou}}</span>
        </div>
        <div class="uni-div">
          <h3 class="uni-h3">油箱容积</h3>
          <!-- 从后端调取汽车的油箱容积 -->
          <span class="span">{{item.rongji}}</span>
        </div>
        <div class="uni-div">
          <h3 class="uni-h3">车门数</h3>
          <!-- 从后端调取汽车的车门数 -->
          <span class="span">{{item.chemen}}</span>
        </div>
        <div class="uni-div">
          <h3 class="uni-h3">汽车损坏情况</h3>
          <!-- 从后端调取汽车的损坏情况 -->
          <span class="span">{{item.qingkuang}}</span>
        </div>
      </view>
    </view>
    <!-- 汽车的配置信息 -->
    <h4 class="uni-h4">配置信息</h4>
    <view class="peizhiinfo">
      <label class="label">驻车雷达</label>
      <label class="label">胎压监测功能</label>
      <label class="label">蓝牙/充电口</label>
      <label class="label">远/近光灯</label>
      <label class="label">自动驻车</label>
      <label class="label">一键启动</label>
      <label class="label">自动空调</label>
      <label class="label">空气系统</label>
      <label class="label">座椅</label>
    </view>
    <!-- 温馨提示 -->
    <h5 class="uni-h5">*以上信息仅供参考，请以门店实物为准</h5>
    <!-- footer日均价格以及预定按钮 -->
    <view class="yuding">
      <div class="left">
        <span class="span price">￥{{rentPrice}}</span>
        <span class="span rijun">/日均</span>
      </div>
      <view v-if="isBusin === 0" @click="gotoOrder(0)" style="float: right;margin-right: 6px;">
        <button class="submit">立即预订</button>
      </view>
      <view v-if="isBusin === 1">
        <button class="submit" @click="gotoOrder(1)">修改信息</button>
        <button class="submit" @click="delCar">下架汽车</button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        isShow: false, //默认不展示
        rentPrice: '',
        isBusin: 0, //默认是为0 1表示是商家
        img: '../../static/k-on.jpg',
        carphoto: [{ image: '../../static/k-on.jpg', }, ],
        carinfo: [{ pinpai: '本田凌派', }, ],
        qiche: [{
          nengyuan: '汽油',
          pailiang: '1.0T自动',
          jiegou: '三厢轿车5座',
          ranyou: '92-93汽油',
          rongji: '40L',
          chemen: '4门',
          qingkuang: '无损坏情况',
        }, ],
      }
    },
    preview() {
      let that = this
      wx.previewImage({ urls: that.data.src })
    },
    onLoad(option) {
      if (option.id !== undefined) {
        console.log(option.id)
        this.id = option.id
        console.log(option.image)
        this.img = option.image
        console.log(option.busin)
        if (parseInt(option.busin) === 1) {
          this.isBusin = parseInt(option.busin)
          console.log(option.busin)
        }
        this.getCarDetail()
        this.carDetail()
      }
    },
    methods: {
      // 获取后端 汽车信息数据
      async getCarDetail() {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/carDetail',
          method: 'post',
          data: { id: this.id },
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
        })
        console.log(res.data)
      },
      // 获取 car表的信息
      async carDetail() {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/getCarById',
          method: 'POST',
          data: { id: this.id },
          header: { 'Content-Type': 'application/x-www-form-urlencoded' },

        })
        if (res.status === 0) {
          console.log(res)
          this.carinfo[0].pinpai = res.data.C_Brand
          this.carinfo[0].size = '1.0T自动 | 三厢' + res.data.C_Seat + '座'
          this.carinfo[0].image = res.data.C_Image
          this.rentPrice = res.data.C_Price
        }
      },
      //进入下单按钮 或是修改汽车界面
      gotoOrder(isBusin) {
        if (isBusin === 0) { //如果是用户登录
          uni.navigateTo({ url: `/subpkg/dingdan/dingdan?id=${this.id}&image=${this.img}` })
        } else { //商家登录 进入修改汽车信息界面
          uni.navigateTo({ url: `/subpkg/updateCar/updateCar?id=${this.id}&image=${this.img}` })
        }

      },
      // 下架汽车
      delCar() {
        let that = this
        uni.showModal({
          title: '确认要下架该汽车嘛？',
          // content: '这是一个模态弹窗',
          success: function(res) {
            if (res.confirm) {
              console.log('商家点击确定')
              that.delCarAPI()
              // 跳转到汽车列表页面
              uni.navigateTo({ url: '/subpkg/busin/B-Details/B-Details' })
            } else if (res.cancel) {
              console.log('商家点击取消')
            }
          }
        })
      },
      // 下架汽车的接口
      async delCarAPI() {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/delete-car',
          method: 'post',
          data: { carID: this.id },
          header: { 'Content-Type': 'application/x-www-form-urlencoded' }
        })
        console.log(res)
        if (res.status === 0) {
          uni.showToast({
            title: '下架成功!',
            icon: 'none',
            duration: 2000
          })
          console.log('下架成功！')
        } else {
          uni.showToast({
            title: '下架失败!',
            icon: 'none',
            duration: 2000
          })
        }
      }
    }
  }
</script>
<style lang="scss">
  // 汽车图片
  .carphoto .img {
    width: 730rpx;
    height: 300rpx;
    margin: 10rpx;
  }

  // 汽车结构组成大盒子
  .carinfo {
    width: 730rpx;
    height: 240rpx;
    background-color: white;
    margin-left: 10rpx;
    margin-right: 10rpx;
  }

  // 汽车品牌名
  .carinfo .uni-h1 {
    /*    width: 100%;
    height: 100%; */
    margin-left: 30rpx;
    margin-bottom: 20rpx;
    font-size: 40rpx;
    font-weight: 700;
  }

  // 强制信息在一行显示
  .carinfo .one {
    // width: 100%;
    // height: 100%;
    margin-top: -50rpx;
    overflow: auto;
    white-space: nowrap;
    text-align: center;
  }

  // 将div转换成成行内块模式，并设置宽度和高度
  .one .uni-div {
    display: inline-block;
    width: 175rpx;
    height: 70rpx;
  }

  //汽车结构名称的css
  .one .uni-div .uni-h3 {
    font-size: 26rpx;
    color: #a9a9a9;
  }

  // 后台获取汽车结构信息的css
  .one .uni-div .span {
    font-size: 30rpx;
    color: #000000;
  }

  // 配置信息标题的css
  .uni-h4 {
    margin-top: 25rpx;
    margin-left: 10rpx;
    margin-bottom: 5rpx;
    font-size: 35rpx;
    font-weight: 700;
  }

  // 配置信息大盒子的css
  .peizhiinfo {
    width: 730rpx;
    height: 425rpx;
    background-color: white;
    margin-left: 10rpx;
    margin-right: 10rpx;
  }

  // 每个配置信息label的css
  .peizhiinfo .label {
    display: inline-block;
    padding-left: 10rpx;
    padding-top: 10rpx;
    font-size: 30rpx;
    font-weight: 700;
    background-color: #b9b9b9;
    width: 200rpx;
    height: 90rpx;
    margin: 20rpx 10rpx 20rpx 20rpx;
  }

  //温馨提示的css
  .uni-h5 {
    text-align: center;
    margin-top: 10px;
    margin-left: 10rpx;
    margin-right: 10rpx;
    font-size: 26rpx;
    color: #a9a9a9;
  }

  // 预定大盒子的css
  .yuding {
    width: 750rpx;
    height: 140rpx;
    background-color: #ffffff;
  }

  // 预定大盒子左边的css
  .yuding .left {
    margin-left: 20rpx;
    padding-top: 30rpx;
  }

  // 从后端获取汽车日均价格的css
  .left .price {
    display: inline-block;
    float: left;
    font-size: 40rpx;
    font-weight: 700;
    color: #ecd582;
  }

  // 预定左边盒子日均的css
  .left .rijun {
    display: inline-block;
    float: left;
    font-size: 35rpx;
    padding-right: 20rpx;
  }

  // 提交按钮的css
  .yuding .submit {
    display: inline-block;
    // float: right;
    // margin-right: 2rpx;
    font-size: 35rpx;
    font-weight: 700;
    text-align: center;
    width: 260rpx;
    height: 90rpx;
    background-color: #ffc65d;
  }
</style>